<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增用户')}" />
    <th:block th:insert="~{include :: select2-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form id="form-channel-add" class="form-horizontal" th:object="${channel}">
        <input name="channelId" th:field="*{channelId}" type="hidden">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">频道名称</label>
            <div class="col-sm-5">
                <input id="channelName" name="channelName" th:field="*{channelName}" placeholder="请输入频道名称" class="form-control" type="text" maxlength="30" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">链接地址</label>
            <div class="col-sm-5">
                <input id="linkUrl" name="linkUrl" th:field="*{linkUrl}" placeholder="请输入链接地址" class="form-control" type="text" maxlength="30" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">频道说明</label>
            <div class="col-sm-5">
                <textarea id="intro" name="intro" th:text="*{intro}" placeholder="请输入频道说明" class="form-control" required></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">频道类型</label>
            <div class="col-sm-3">
                <label class="radio-box col-form-label mr-3"> <input type="radio" name="channelType" th:field="*{channelType}" value="0" disabled="disabled" /> 系统 </label>
                <label class="radio-box col-form-label mr-3"> <input type="radio" name="channelType" th:field="*{channelType}" value="1" th:disabled="*{channelId > 0}" /> 内部 </label>
                <label class="radio-box col-form-label"> <input type="radio" name="channelType" th:field="*{channelType}" value="2" th:disabled="*{channelId > 0}" /> 外部 </label>
            </div>
        </div>
        <div class="inside-disabled" th:style="${channel.channelType <= 1?'':'display: none'}">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">使用模块</label>
                <div class="col-sm-3">
                    <select name="moduleId" th:field="*{moduleId}" class="form-control m-b valid" th:disabled="*{channelId > 0}">
                        <option th:each="module : ${modules}" th:value="${module.ordinal()}" th:text="${module.name}">文章</option>
                    </select>
                </div>
                <label class="col-sm-2 col-form-label is-required text-sm-right">目录</label>
                <div class="col-sm-3">
                    <input name="channelDir" th:field="*{channelDir}" placeholder="请输入频道目录" class="form-control" type="text" maxlength="30" th:disabled="*{channelId > 0}">
                    <span style="color: red">仅限英文，不能带空格或符号</span>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">项目名称</label>
                <div class="col-sm-3">
                    <input name="itemName" th:field="*{itemName}" placeholder="请输入项目名称" class="form-control" type="text" maxlength="30" required>
                    <span style="color: red">如：文章，软件，图片</span>
                </div>
                <label class="col-sm-2 col-form-label is-required text-sm-right">单位</label>
                <div class="col-sm-3">
                    <input name="itemUnit" th:field="*{itemUnit}" placeholder="请输入项目单位" class="form-control" type="text" maxlength="30" required>
                    <span style="color: red">如：篇，个，张</span>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">打开方式</label>
            <div class="col-sm-3">
                <label class="radio-box col-form-label mr-3"> <input type="radio" name="isBlank" th:field="*{isBlank}" value="0" checked="checked"/> 原窗口 </label>
                <label class="radio-box col-form-label mr-3"> <input type="radio" name="isBlank" th:field="*{isBlank}" value="1" /> 新窗口 </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">属性</label>
            <div class="col-sm-3">
                <label class="toggle-switch switch-solid col-form-label mr-3">
                    <input type="checkbox" id="isHide" th:checked="${channel.isHide == 1 ? true : false}">
                    <span>隐藏</span>
                </label>
                <label class="toggle-switch switch-solid col-form-label">
                    <input type="checkbox" id="isDisabled" th:checked="${channel.isDisabled == 1 ? true : false}">
                    <span>禁用</span>
                </label>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">排序</label>
            <div class="col-sm-2">
                <input name="sort" th:field="*{sort}" placeholder="请输入排序" class="form-control" type="text" maxlength="5" required>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-2"></label>
                <div class="col-sm-10">
                <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
</div>

<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: select2-js}" />
<script type="text/javascript">

    $(function () {
        $("input[name='channelType']").change(function() {
            if ($(this).val() <= 1) {
                $(".inside-disabled").show();
            } else {
                $(".inside-disabled").hide();
            }
        });
    });

    function submitHandler() {
        if ($("#channelName").val().length < 1) {
            return layer.msg("频道名称不能为空！");
        }
        if ($("#linkUrl").val().length < 1) {
            return layer.msg("频道连接地址不能为空！");
        }
        var data = $("#form-channel-add").serializeArray();
        var isHide = $("input[id='isHide']").is(':checked') === true ? 1 : 0;
        var isDisabled = $("input[id='isDisabled']").is(':checked') === true ? 1 : 0;
        data.push({"name": "isHide", "value": isHide});
        data.push({"name": "isDisabled", "value": isDisabled});
        var index = layer.load(1);
        $.post("/channel/save.json", data, function (json) {
            layer.close(index);
            if (json.code === 0) {
                layer.alert('恭喜您，保存成功！', function () {
                    parent.location.reload();
                });
            } else {
                layer.msg(json.msg);
            }
        });
    }
</script>
</body>
</html>